<template>
  <div class="page-box">
    <div class="form-box">
    <el-form :model="form" label-width="100px" class="form-item-box" :rules="rules" ref="form">
      <el-form-item label="协议标题" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>

      <el-form-item label="协议类型" prop="agreement_type">
        <el-radio-group v-model="form.agreement_type">
          <el-radio-button label="1"> 注册协议 </el-radio-button>
          <el-radio-button label="2"> 隐私协议 </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="所属角色:" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="协议内容" prop="content">
        <tinymce-editor v-model="form.content" :init="initEditor"  />
      </el-form-item>


    </el-form>
    <el-button type="primary" @click="submitData()" class="bt-fix"> 提交协议 </el-button>
    </div>
  </div>
</template>

<script>
  import TinymceEditor from '@/components/TinymceEditor';

  export default {
    components: {
      TinymceEditor
    },
    data() {
      return {
        form: {
          title:'',
          agreement_type:null,
          type:'',
          content:''

        },
        options: [{
          value: 1,
          label: '代理商'
        }, {
          value: 2,
          label: '邻工'
        }, {
          value: 3,
          label: '技工'
        }, {
          value: 4,
          label: '管家'
        }, {
          value: 5,
          label: '商家'
        }],
        rules: {
          title: [{
            required: true,
            message: '请输入协议标题',
            trigger: 'blur'
          }, ],
          agreement_type: [{
            required: true,
            message: '请输入角色协议名称',
            trigger: 'blur'
          }, ],
          type: [{
            required: true,
            message: '请输入协议名称',
            trigger: 'blur'
          }],
          content: [{
            required: true,
            message: '请输入协议内容',
            trigger: 'blur'
          }],
        },
         initEditor: {
              height: 800,
              branding: false,
              skin_url: '/tinymce/skins/ui/oxide',
              content_css: '/tinymce/skins/content/default/content.css',
              language_url: '/tinymce/langs/zh_CN.js',
              language: 'zh_CN',
              plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
              toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
              toolbar_drawer: 'sliding',
              images_upload_handler: (blobInfo, success, error) => {
                let file = blobInfo.blob();
                const formData = new FormData();
                formData.append('file', file, file.name);
                this.$http.post('/upload/uploadImage', formData).then(res => {
                  if (res.data.code == 0) {
                    success(res.data.data);
                  } else {
                    error(res.data.msg);
                  }
                }).catch(e => {
                  console.error(e);
                  error(e.message);
                });
              },
              file_picker_types: 'media',
              file_picker_callback: () => {}
            },
      }
    },
    created() {

    },
    beforeDestroy() {
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData(){
        const id = this.$route.query?.id;
        if(id){
          this.$httpRequest.get('/agreement/info', {id:id}).then(result => {
            console.log('----detail----', result);
            if(result.code === 0){
              this.form=result.data
               console.log('---- this.form---',this.form);
            }
          }).catch(e => {
            this.$message.error(e.message)
            });
        }
      },

      submitData() {
        this.$refs['form'].validate((valid) => {

          if (valid) {
            console.log('---this.form---',this.form)

            this.$http.post('/agreement/edit', this.form).then(res => {
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);

                //this.$emit('done');
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {

              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },

    }
  }
</script>

<style>
  .page-box{

    padding: 20px;

  }

  .bt-fix{margin-left: 100px;}
  .form-box{
    padding: 30px;
     background-color: #ffffff;
  }

</style>
